<template>
    <!--<div>userDetail:这是<strong style="color: red">{{$route.params.id}}</strong>用户</div>-->
    <!--<div>userDetail:这是<strong style="color: red">{{id}}</strong>用户</div>-->
    <div>
      当前用户的id:<strong style="color: red">{{id}}</strong> <br>
      当前用户的name:<strong style="color: red">{{name}}</strong> <br>
      当前用户的age:<strong style="color: red">{{age}}</strong> <br>
    </div>
</template>

<script>

    /*url:
      http://主机:端口/path/params?query#hash*/

    export default {
        name: "userDetail",
        props:["id","age","name"],
        mounted(){
          // 拿到id发送请求返回id对应的完整的用户数据!
          // console.log("userDetail_mounted",this.id)

          /*console.log(this.$route.hash)
          console.log(this.$route.params.id)
          console.log(this.$route.query)*/
        },
        watch:{
          $route:{
            deep:true,
            immediate: true,
            handler(val){
              console.log("watch_id",val.params.id)
            }
          }
        }
    }
</script>

<style scoped>

</style>
